<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 3.新制作一个注册页面，要求：
      3.1 包含用户名，密码，性别，学院，爱好，自我介绍及提交按钮
      3.2 包含:输入框，密码框，单选框，多选框，文本域，下拉列表
      3.3 每个需要提交的标签都要有name值
      3.4 按照name的方式查找各个元素
      3.5 按照标签的方式查找各个元素 -->
    <form action="" name="myform" method="POST">
        用户名：<input type="text" name="昵称">
        <br />
        密码：<input type="password" name="pwd">
        <br />
        性别：<input type="radio" name="性别" id="sex1">男
        <input type="radio" name="性别" id="sex2">女
        <br />
        学院：<select name="学院">
                <option value="1" name="op1">软件工程</option>
                <option value="2" name="op1">文化旅游</option>
                <option value="3" name="op1">城乡建筑</option>
        </select>
        <br />
        爱好：<input type="checkbox" name="复选" value="游泳">游泳
              <input type="checkbox" name="复选" value="美食">美食
              <input type="checkbox" name="复选" value="打游戏">打游戏
        <br />
        自我介绍：<textarea name="介绍" cols="30" rows="10"></textarea>
        <br />
         <input type="submit" value="提交按钮">
    </form>
</body>
    <script>
        // 按照name的方式查找各个元素
        var foname=document.getElementsByName('myform');
        console.log(foname);
        var txname=document.getElementsByName('昵称');
        console.log(txname);
        var sxname=document.getElementsByName('性别');
        console.log(sxname);
        var slctname=document.getElementsByName('学院');
        console.log(slctname);
        var opname=document.getElementsByName('op1');
        console.log(opname);
        var ckbname=document.getElementsByName('复选');
        console.log(ckbname);
        var txaname=document.getElementsByName('介绍');
        console.log(txaname);

        // 按照标签的方式查找各个元素
        var form1=document.getElementsByTagName('form');
        console.log(form1);
        var input1=document.getElementsByTagName('input');
        console.log(input1);
        var select1=document.getElementsByTagName('select');
        console.log(select1);
        var option1=document.getElementsByTagName('option');
        console.log(option1);
        var textarea1=document.getElementsByTagName('textarea');
        console.log(textarea1);

    </script>
</html>